<template>
	<view 
		class="indexBox"
		style="background-image: url(http://tuzhuang-1304727035.file.myqcloud.com/images/index16.png);"
	>
		<!-- 火热招募装修幸运儿 -->
		<view class="indexBox_huoxian">
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/sanci2.png"></image>
		</view>
		<!-- 从心设计  匠心筑家 -->
		<!-- <view class="indexBox_topText">
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/beijing2.png"></image>
		</view> -->
		<!-- 2022年图装杯设计师工匠大赛 -->
		<!-- <view class="indexBox_topText" style="margin-top: 38rpx;">
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/beijing3.png"></image>
		</view> -->
		<!-- 大赛主办方：阳泉市装修协会 -->
		<!-- <view class="commonText" style="margin-top: 28rpx;">
			大赛主办方：阳泉市装修协会
		</view> -->
		<!-- 大赛协办方： -->
		<!-- <view class="commonText">
			大赛协办方：
		</view> -->
		<!-- 大赛承办方：图装平台 -->
		<!-- <view class="commonText">
			大赛承办方：图装平台
		</view> -->
		<!-- 报名领1000元装修金 -->
		<view class="signUp">
			<image 
				src="http://tuzhuang-1304727035.file.myqcloud.com/images/beijing4.png"
				@click="gotoSignUp"
			></image>
		</view>
		
		<!-- 艺术字 -->
		<view class="indexBox_yishuzi">
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/sanci3.png"></image>
		</view>
		<!-- 循环盒子  一个双层循环 外部循环背景 内部循环数据 -->
		<!-- 内循环 -->
		<!-- 图片 -->
		<!-- 信息  第一个信息和后面的不同 所有写两个判断一下-->
		<view class="backBox">
			<view 
				class="backBox_outside"
				v-for="(item,index) in backList"
				:key="index"
				:style="{'background-image':'url('+item.image+')'}"
				:class="index == 0 ? '' : 'heightTwo'"
			>
				<view 
					class="backBox_outside_box"
					:class="index == 0 ? 'oneBox' : ''"
					v-for="(val,key) in item.list"
					:key="key"
					@tap="gotoShejiDetail(val)"
				>
					<view class="backBox_outside_box_top">
						<image :src="val.image"></image>
					</view>
					<view 
						class="backBox_outside_box_bottomOne"
						v-if="index == 0"
					>
						<view class="backBox_outside_box_bottomOne_name">
							<text>{{val.name}}</text>
							<text style="background-image: url(http://tuzhuang-1304727035.file.myqcloud.com/images/zanyong1.png);">{{val.identity}}</text>
						</view>
						<view class="backBox_outside_box_bottomOne_text">
							{{val.text}}
						</view>
						<view class="backBox_outside_box_bottomOne_price">
							¥{{Number(val.price).toFixed(2)}}/㎡
						</view>
					</view>
					
					<view 
						class="backBox_outside_box_bottomTwo"
						v-else
					>
						<!-- <view class="backBox_outside_box_bottomTwo_title">
							{{val.title}}
						</view>
						<view class="backBox_outside_box_bottomTwo_price">
							<text>¥{{Number(val.price).toFixed(2)}}</text>
							<text>¥{{Number(val.yPrice).toFixed(2)}}</text>
						</view>
						<view 
							class="backBox_outside_box_bottomTwo_huodong"
							style="background-image: url(http://tuzhuang-1304727035.file.myqcloud.com/images/zanyong3.png);"
						>
							{{val.preferential}}
						</view> -->
						<view class="backBox_outside_box_bottomTwo_title">
							<text>{{val.name}}</text>
							<text style="background-image: url(http://tuzhuang-1304727035.file.myqcloud.com/images/zanyong1.png);">{{val.identity}}</text>
						</view>
						<view class="backBox_outside_box_bottomTwo_time">
							{{val.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 数据列表 -->
		<view class="indexBox_tuList">
			<image 
				v-for="(item,index) in imgList"
				:key="index"
				:src="item"
			></image>
		</view>
		
		<view class="btn" @click="gotoSignUp">
			立即报名
		</view>
		<!-- <tabbar ref='tabbar' /> -->
		<!-- <view class="tabClass">
			<view>
				<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/sanci12.png"></image>
				<text>图装杯</text>
			</view>
			<view @click="gotoMy">
				<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/sanci13.png"></image>
				<text>个人中心</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				backList:[
					{
						image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index1.png',
						list:[
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index2.png',
								name:'李小双',
								id:'',
								name1:'【',
								identity:'设计师',
								text:'让灵感自由释放，创造一个心灵渴望的空间。',
								price:20,
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index3.png',
								name:'张雷',
								id:'204',
								name1:'【张雷】巅峰设计工作室',
								identity:'设计师',
								text:'将设计融于人性，将家居带入悠闲自在的情境。',
								price:20,
								type:'findDesign'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index4.png',
								name:'姬涛',
								id:'61',
								name1:'【姬涛】之间设计-全案工作室',
								identity:'设计师',
								text:'享受生活-享受设计-谦卦',
								price:20,
								type:'findDesign'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index5.png',
								name:'金山哲',
								id:'202',
								name1:'【金山哲】宽庭设计工作室',
								identity:'设计师',
								text:'以深厚的中西方文化底蕴打造个性化空间',
								price:20,
								type:'findDesign'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index6.png',
								name:'荆富强',
								id:'201',
								name1:'【荆富强】名创空间设计工作室',
								identity:'设计师',
								text:'名于信，创于新。',
								price:20,
								type:'findDesign'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index7.png',
								name:'赵振泰',
								id:'53',
								name1:'【赵振泰】米家设计工作室',
								identity:'设计师',
								text:'设计改变生活，让业主爱上回家',
								price:20,
								type:'findDesign'
							}
						]
					},
					{
						image:'http://tuzhuang-1304727035.file.myqcloud.com/images/56823a5fe7960d56a42b09574352b263.png',
						list:[
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index9.png',
								name:'胡丁旺',
								id:'347',
								name1:'安达匠心施工队',
								identity:'工长',
								type:'findCraftsman',
								text:'从业时间：20年'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index10.png',
								name:'鲍院庆',
								id:'',
								name1:'',
								identity:'工长',
								text:'从业时间：20年'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index11.png',
								name:'陈东旺',
								id:'',
								name1:'',
								identity:'工长',
								text:'从业时间：20年'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index12.png',
								name:'贾永亮',
								id:'349',
								name1:'河马装饰施工',
								type:'findCraftsman',
								identity:'工长',
								text:'从业时间：20年'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index13.png',
								name:'老卢',
								id:'',
								name1:'',
								identity:'工长',
								text:'从业时间：20年'
							},
							{
								image:'http://tuzhuang-1304727035.file.myqcloud.com/images/index14.png',
								name:'冯喜银',
								id:'',
								name1:'',
								identity:'工长',
								text:'从业时间：20年'
							},
						]
					},
					],
				
				imgList:[
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci6.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci7.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci8.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci9.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci10.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/sanci11.png',
					'http://tuzhuang-1304727035.file.myqcloud.com/images/index15.png'
				]
				
				
			}
		},
		methods: {
			gotoSignUp(){
				uni.navigateTo({
					url:'/pagesHome/signUp/signUp'
				})
			},
			gotoShejiDetail(row){
				if(row.type){
					uni.navigateTo({
						url:`/pagesCommodity/shopDetailsDefault?type=${row.type}&id=${row.id}&name=${encodeURIComponent(row.name1)}`
					})
				}
			}
		}
	}
</script>

<style scoped>
@import url("./index1.css");
</style>
